import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input} from 'antd';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import React from 'react';
import styles from '../styles.less';

interface CountInputProps extends FormComponentProps {
  value?: any[];
  onChange?: (value:any) => void;
}

const CountInput: React.FC<CountInputProps> = props => {
  const { value } = props;

  const handleChange = (e:any, index:number) =>{
    triggerChange(e.target.value, index)
  }

  const triggerChange = (changedValue:any, index:number)=> {
    const { onChange, value } = props;
    if (onChange && value) {
      value[index]=changedValue;
      onChange(value);
    }
  };

  return (
    <Input.Group compact>
      <Input value={value ? value[0] : ''} onChange={(val) => handleChange(val, 0)} style={{ width: '40%', textAlign: 'center' }} placeholder="" />
      <Input className={styles.numberGroup} style={{backgroundColor: '#fff'}} placeholder="~" disabled/>
      <Input value={value ? value[1] : ''} onChange={(val) => handleChange(val, 1)} style={{ width: '40%', textAlign: 'center', borderLeft: 0 }} placeholder="" />
    </Input.Group>
  );
};

export default Form.create<CountInputProps>()(CountInput);
